<!-- has_next的时候右侧弹出框 -->
<template>
    <div class="right-cate">
        <nut-navbar class="navbar" z-index="5" :clickable="false">
            <template #content>
                <span>{{ title }}</span>
            </template>
            <template #left>
                <iconpark-icon @click="close" class="close" name="back" size="1.2rem"></iconpark-icon>
            </template>
            <template #right v-if="isLocalLoggedIn">
                <div class="amount_box">
                    <iconpark-icon class="close" icon-id="dong1" size="1.2rem"></iconpark-icon>
                    <span>
                        <nut-price :price="convert2DisplayMoney(roleInfo.money)" size="small" style="color: #ffd56d"
                            :decimal-digits="0" thousands :need-symbol="false" /></span>
                    <Imgt class="plus" src="/imgs/home/plus.png" @click="router.push('deposit')"></Imgt>
                </div>
            </template>
        </nut-navbar>


        <div class="list">
            <div class="box">
                <div class="level-item" v-for="(v, i) in thirdData" :key="i">
                    <GameItem :item="v" :size="2"></GameItem>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import eventBus from '@/lolo/eventBus';
import pinia from "@/store";
import { computed, ref, onBeforeUnmount } from "vue"
import { storeToRefs } from "pinia";
import { Page } from "@/store/page";
import { User } from "@/store/user";
import { convert2DisplayMoney, unserialize } from "@/utils/useStoreMethods";
import { useRouter } from "vue-router";

const router = useRouter();
const page = Page(pinia);
const user = User(pinia);
const { homeGameData } = storeToRefs(page);
const { isLocalLoggedIn, roleInfo } = storeToRefs(user);

// 监听参数
const params: any = ref({})
eventBus.on('setShowRight', (data: any) => {
    params.value = data
})
onBeforeUnmount(() => {
    eventBus.off('setShowRight')
})

const title = computed(() => { // 标题
    if (homeGameData.value.length) {
        const data = homeGameData.value.find(
            (e: any) => e.id == Number(params.value.venue_id)
        );
        if (data && data.name) {
            return unserialize(data.name, false); // name as strin
        }
        return '';
    } else {
        return '';
    }
})

const thirdData = computed(() => { // 列表
    const p = homeGameData.value.find((plat: any) => plat.id == Number(params.value.venue_id))
    if (p) {
        const c = p.three_platform.find((cc: any) => cc.id == Number(params.value.agent_id))
        if (c) {
            const arr: any = []
            c.three_game_kind.forEach((a: any) => {
                arr.push(...a.three_game)
            })
            return arr
        }
    }
    return []
})

// 关闭
const close = () => {
    params.value = {}
    Page(pinia).setShowRight(false)
}


</script>

<style lang="scss" scoped>
.right-cate {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(/imgs/home/public_bg.webp);
    background-size: 80%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .amount_box {
        display: flex;
        align-items: center;
        background-color: #1D1C48;
        height: 28px;
        padding: 0 8px 0 6px;
        border-radius: 14px;

        >span {
            margin: 0 6px;
        }

        .plus {
            width: 16px;
            height: 16px;
        }
    }

    .list {
        flex: 1;
        padding: 9px 10px;
        overflow-y: auto;

        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;

            .level-item {
                margin: 0 8px 10px 0;
                position: relative;

                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }
    }
}
</style>